<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务数据接口</title>
    <script src="../static/js/jquery.js"></script>
    <style>
        /* select的样式 */
        #marketName{
            background-color: #ffffff;
            color: #000;
            opacity: .9;
            padding: 2px;
            border-radius: 2px;
            border: 1px solid #000;
            width: 120px;
            height: 30px;
            font-size: 13px;
            font-family: "宋体";
            margin-bottom: 10px;
        }
        td{
            padding: 10px;
            width: 400px;
        }
        .t2{
            width: 1700px;
        }
        a:visited{
            color: blue;
        }
    </style>
</head>
<body>
    <h2 align="center">水果销售管理系统数据接口</h2>
    <table border="1" cellpadding="0" cellspacing="0">
            <!-- 下拉框：展示全部卖场名称 -->         &nbsp; &nbsp; &nbsp;
        卖场请求参数：<b>market_name</b> =
        <select id="marketName" onchange="update_market(this.value)">
            {% for m_name in markets %}
                <option>{{ m_name }}</option>
            {% endfor %}
        </select>
                <!-- 表头 -->
        <tr style="text-align: center">
            <td>任务数据接口调用URL</td>
            <td class="t2">任务数据参考内容</td>
        </tr>
            <!-- 表体：循环每个任务 -->
        {% for task in tasks %}
            <tr>
                <td style="text-align: center">
                    <a href="/data-api/{{ task }}?market_name=华冠超市" id="a_{{ task }}">
                        /data-api/{{ task }}?market_name=华冠超市
                    </a>
                </td>
                <td style="word-break: break-all;" id="{{ task }}" class="t2"></td>
            </tr>
            <!-- ajax请求数据：默认华冠超市 -->
            <script>
                    $.ajax({
                        type: 'post',
                        url: "/data-api/{{ task }}",
                        data: {market_name: "华冠超市"},    // 带参请求
                        dataType: "json",
                        success: function (datas) {
                            console.log(datas);
                            // 异步设置 任务数据参考内容
                            str_pretty1 ="";
                            for (var key in datas){
                                str_pretty1 = str_pretty1  +JSON.stringify(key) + "数据" + "\n";
                                str_pretty1 = str_pretty1 + JSON.stringify(datas[key], 2) ;
                                str_pretty1 = str_pretty1 + "\n";
                                document.getElementById('{{task}}').innerText = str_pretty1 ;
                            }
                        },
                        error: function (err) {
                            console.log(err);
                            return err;
                        }
                    })
            </script>
        {% endfor %}

        <script>
            <!-- 获取后端flask传来的任务 -->
            var tasks = {{ tasks | safe}};
            console.log(tasks);
            // 更新下拉框卖场数据
            function update_market(market_name) {
                // 遍历每个任务
                tasks.forEach(function (task) {
                    // 构建 a的id、文本链接 和 请求url
                    var a_id = "a_" + task;
                    var a_href_text = '/data-api/'+ task +'?market_name='+ market_name;
                    var url = "/data-api/"+task;
                    console.log(url, a_id);
                    $.ajax({
                        type: 'post',
                        url: url,
                        data: {market_name: market_name},    // 带参请求
                        dataType: "json",
                        success: function (datas) {
                            console.log(datas);
                            // 异步设置 a的href 和 文本
                            document.getElementById(a_id).href = a_href_text;
                            document.getElementById(a_id).innerText = a_href_text;
                            // 异步设置 任务数据参考内容
                            str_pretty1 ="";
                            for (var key in datas){
                                str_pretty1 = str_pretty1  + JSON.stringify(key) + "数据" + "\n";
                                str_pretty1 = str_pretty1 + JSON.stringify(datas[key], 2) ;
                                str_pretty1 = str_pretty1 + "\n";
                                document.getElementById(task).innerText = str_pretty1 ;
                            }
                        },
                        error: function (err) {
                            console.log(err);
                            return err;
                        }
                    })
                })
            }
        </script>
    </table>
</body>
</html>